<!-- 商城用户地址列表 -->
<template>
	<view class="content">
		<view class="list">

			<!-- 暂无地址 -->
			<empty v-if="addressList.length === 0" :custom="true" src="/mall/static/images/no-address.png" text="暂无地址"></empty>
			<!-- 地址列表 -->
			<view class="row" v-for="(row, index) in addressList" :key="index" @tap="checkAddress(row)">
				<view class="left"> </view>
				<view class="center">
					<view class="name-tel">
						<view class="name">{{ row.real_name }}</view>
						<view class="tel">{{ row.phone }}</view>
					</view>
					<view class="address">
						<text class="clamp2">{{ row.province }}{{ row.city }}{{ row.district
	                }}{{ row.detail }}</text>
					</view>
				</view>
				<view class="right">
					<view class="default" v-if="row.is_default == 1">
						<image src="../static/images/mr.png" mode=""></image>默认
					</view>
					<view class="icon bianji" @tap.stop="addAddress('edit',row)">
						<image src="../static/images/bj2.png" mode=""></image>
						编辑
					</view>
					<view class="remo" @tap.stop="del(row.id)">
						<image src="../static/images/sc2.png" mode=""></image>
						删除
					</view>
				</view>
			</view>
		</view>

		<view class="add">
			<view class="btn" @tap="addAddress('add')">
				新增收货地址
			</view>
		</view>
	</view>
</template>

<script>
	import empty from '@/components/empty/empty';
	import {
		addressList,
		addressDel
	} from '@/api/mall.js'
	import utils from "@/common/utils.js"

	export default {
		components: {
			empty
		},
		data() {
			return {
				source: 0,
				addressList: []
			}
		},
		created() {},
		onLoad(option) {
			this.source = option.back;
		},
		onShow() {
			this.loadData();
		},
		methods: {
			loadData() {
				addressList({
					page: 1,
					limit: 50
				}).then(res => {
					this.addressList = res.data
				})
			},
			//选择地址
			checkAddress(item) {
				if (this.source) {
					//this.$api.prePage()获取上一页实例，在App.vue定义
					item.phone = utils.hidden(item.phone, 3, 4)
					this.prePage().addressData = item;
					uni.navigateBack()
				}
			},
			//删除地址
			del(id) {
				let _self = this;
				uni.showModal({
					title: '提示',
					content: '确定删除收货地址？',
					success(res) {
						if (res.confirm) {
							uni.showLoading({mask:true})
							addressDel({
								id: id
							}).then(res => {
								_self.addressList.forEach((item, index) => {
									if (item.id == id) {
										_self.addressList.splice(index, 1)
									}
								})
								uni.hideLoading()
								uni.showToast({
									icon: "none",
									title: "删除成功",
								})
							})
						} else if (res.cancel) {}
					}
				})
			},
			prePage() {
				let pages = getCurrentPages();
				let prePage = pages[pages.length - 2];
				return prePage.$vm;
			},
			addAddress(type, item) {
				uni.navigateTo({
					url: `/mall/my/addressManage?type=${type}&data=${JSON.stringify(item)}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.add {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 160upx;

		.btn {
			width: 690upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border-radius: 40upx;
			font-size: 30upx;
			background-color: $mall-price;
			color: #fff;
			margin: 0 auto;
		}
	}

	.list {
		flex-wrap: wrap;
		padding-bottom: 200upx;

		.row {
			width: 750upx;
			// padding: 0upx 0upx 0upx 35upx;
			display: flex;
			flex-direction: column;

			.left {
				width: 750upx;
				height: 40upx;
				border-bottom: 1upx solid #e1e1e1;
			}

			.center {
				width: 686upx;
				height: 180upx;
				padding: 0 32upx;
				flex-wrap: wrap;
				border-bottom: 1upx solid #f1f1f1;

				.name-tel {
					margin-top: 20upx;
					margin-bottom: 20upx;
					width: 100%;
					display: flex;
					align-items: baseline;

					.name {
						font-size: 28upx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						margin-right: 60upx;
					}

					.tel {
						margin-left: 30upx;
						font-size: 28upx;
						color: #333333;
					}
				}

				.address {
					width: 686upx;
					font-size: 24upx;
					align-items: baseline;
					color: #777;
					display: flex;
					flex-direction: column;
					// margin-left: 35upx;
					line-height: 50upx;
					overflow: hidden;
				}
			}

			.right {
				width: 686upx;
				padding: 0 32upx;
				height: 50upx;
				border-bottom: 1upx solid #e1e1e1;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				position: relative;

				.default {
					font-size: 22upx;
					color: #6F5C37;
					display: flex;
					align-items: center;

					image {
						margin-right: 10upx;
						width: 30upx;
						height: 30upx;
					}
				}

				.icon {
					position: absolute;
					right: 150upx;
					font-size: 24upx;
					color: #777;
					margin-left: 10upx;
					display: flex;
					align-items: center;

					image {
						width: 32upx;
						height: 32upx;
					}
				}

				.remo {
					position: absolute;
					right: 32upx;
					font-size: 22upx;
					color: #777;
					margin-left: 10upx;
					display: flex;
					align-items: center;

					image {
						width: 32upx;
						height: 32upx;
					}
				}
			}
		}
	}
</style>
